"use client"
import Link from "next/link";
import { useState} from 'react'
import { usePathname } from "next/navigation";
export default function DahsboradLayout({ children }: Readonly<{children:React.ReactNode}>) {
  // 这个count
  const [count, setCount] = useState(0)
  const pathname = usePathname()
  return (
    <div className='border-2 border-dashed border-black p-4 w-1/2 mx-auto mt-4'>
      <h3 className='text-2xl font-bold flex gap-4  mb-4 '>
        <Link className={pathname === '/dashbord/setting' ? 'text-purple-600' : 'hover:underline'} href={'/dashbord/setting'}>Settings</Link>
        <Link className={pathname === '/dashbord/about' ? 'text-purple-600' : 'hover:underline'} href={'/dashbord/about'}>About</Link>
      </h3>
      <p>Dashbord layout: {count}</p>
      <button onClick={() => setCount(count + 1)} className='bg-black text-white p-2 rounded-md cursor-pointer shadow-sm bg-violet-500 hover:bg-violet-600 active:bg-violet-700 focus:outline-none focus:ring focus:ring-violet-300 '>increment</button>
      {children}
    </div>
  )
}
